<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/module/index/_taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<title>JC mms</title>
		<jsp:include page="/_loadCssScript.jsp"></jsp:include>
		<STYLE type="text/css">
			/* 彩信帧预览 */
			#previewDiv {
				position: relative;
				height: 500px;
				width: 250px;
			}
			#smsBgDiv{
				background-color: #DEE3F6;
				height: 80%;
				width: 90%;
				top: 50px;
				left: 5%;
				position: absolute;
			}
			#phoneDiv{
				background: url("/jcmms/images/iphone5_s.png") no-repeat;
				width: 250px;
				height: 500px;
				position: absolute;
			}
			#contentDiv {
				top: 15%;
				left: 11%;
				width: 79%;
				height: 70%;
				position: absolute;
				overflow: auto;
				word-break: break-all;
				background-color: #DEE3F6;
			}
			#contentDiv img {
				max-width: 99%;
			}
		</STYLE>
		<script type="text/javascript">
			// 浏览文件
			function BrowseServer(config, callback)
			{
				var finder = new CKFinder(config);
				finder.basePath = '/js/ckfinder/';	// The path for the installation of CKFinder (default = "/ckfinder/").
				finder.selectActionFunction = callback;
				finder.popup();
			}
		
			$(function(){
				
				// 判断必要的值是否已填写
				var hasNecessaryValue = function(){
					var inputs3 = $("form:first").find(":input[name='imageUri'], :input[name='audioUri'], :input[name='text']");
					var isAllNull = true;
					$.each(inputs3, function(index, item){
						if($.trim($(item).val()) != ''){
							isAllNull = false;
						}
					});
					return !isAllNull;
				};
				
				/** 帧数变化后处理按钮状态和帧显示 */
				function frameChangeHandler() {
					var currentFrame = $(":input[name='currentFrame']").val();
					var totalFrame = $(":input[name='totalFrame']").val();
					if (currentFrame < 2)
						$("#previousBtn").attr("disabled", "disabled");
					else
						$("#previousBtn").removeAttr("disabled");
					if (currentFrame == totalFrame)
						$("#nextBtn").attr("disabled", "disabled");
					else
						$("#nextBtn").removeAttr("disabled");
					$("#frameSpan").html(currentFrame + "/" + totalFrame);
				}
				frameChangeHandler();
				$(":input[name='currentFrame']").change(frameChangeHandler);
				$(":input[name='totalFrame']").change(frameChangeHandler);
				
				// 图片、铃音、文字改变时的事件绑定
				/*$("form:first").find(":input[name='imageUri'], :input[name='audioUri'], :input[name='text']").change(function(){
					if(hasNecessaryValue()){
						//$("#nextBtn").button("enable");
					}else{
						//$("#nextBtn").button("disable");
					}
				});*/
				
				/** 图片路径输入框改变时的监听 */
				function imageUriChangeHandler() {
					var contentDiv = $("#contentDiv");
					if (this.value == ''){
						var imgObj = contentDiv.find("p:has(img)");
						if(imgObj.length > 0){
							imgObj.remove();
						}
					} else {
						var imgStr = "<p class='text_align_center'><img src='" + this.value + "'/></p>";
						contentDiv.prepend(imgStr);
					}
				}
				$(":input[name='imageUri']").on("change", imageUriChangeHandler);
				/** 文字输入框改变时的监听 */
				function textChangeHandler() {
					var text = this.value;
					if(text != null){
						text = text.replace(/[\r\n]/g, "<br/>"); // 替换回车换行为<br/>
						text = text.replace(/[ ]/g, "&nbsp;"); // 替换空格为&nbsp;
					}
					var textStr = "<p>" + text + "</p>";
					if($("#contentDiv p:not(:has(img))").length > 0){
						$("#contentDiv p:not(:has(img))").remove();
					}
					$("#contentDiv").append(textStr);
				}
				$(":input[name='text']").on("change keyup", textChangeHandler);
				/** 【选择图片】按钮事件绑定 */
				$("#browseImage").click(function(){
					// 弹出文件选择
					var config = {"resourceType":"Images" };
					BrowseServer(config, function(fileUrl){
						if(fileUrl != null){
							var imageUriInput = $(":input[name='imageUri']");
							imageUriInput.val(fileUrl);
							imageUriInput.trigger("change");
						}
						return true;
					});
				});
				/** 【选择铃音】按钮事件绑定 */
				$("#browseAudio").click(function(){
					// 弹出文件选择
					var config = {"resourceType":"Audios" };
					BrowseServer(config, function(fileUrl){
						if(fileUrl != null){
							$(":input[name='audioUri']").val(fileUrl);
						}
						return true;
					});
				});
				/** 图片和音频选项中的【清除】按钮响应 */
				$("#cleanImageButton, #cleanAudioButton").click(function(){
					var input = $(this).parents(":has(input):first").find("input");
					input.val("");
					input.trigger("change");
				});
				
				/** 返回操作按钮状态，返回对象是字符串数组。 */
				function getOPButtonState() {
					var buttons = $(".form-actions button");
					var size = buttons.size();
					var OPButtonState = new Array(size);
					$.each(buttons, function(i, n){
						if ($(n).attr("disabled") != null)
							OPButtonState[i] = $(n).attr("disabled");
					});
					return OPButtonState;
				}
				/** 设置操作按钮状态，参数是字符串数组，字符串为“disabled”表示禁用，否则就是启用	*/
				function setOPButtonState(OPButtonState) {
					var buttons = $(".form-actions button");
					$.each(buttons, function(i, n){
						if (OPButtonState[i] == "disabled")
							$(n).attr("disabled", "disabled");
						else
							$(n).removeAttr("disabled");
					});
				}
				/** 禁用所有操作按钮 */
				function disableAllOPButton(OPButtonState) {
					var buttons = $(".form-actions button");
					$.each(buttons, function(i, n){
						$(n).attr("disabled", "disabled");
					});
				}
				/** 弹出对话框 */
				function showResultDialog(result, message) {
					if (result == "SUCCESS") {
						$("#successLabel").show();
						$("#failLabel").hide();
					} else {
						$("#successLabel").hide();
						$("#failLabel").show();
					}
					if (message != null)
						$("#resultDialog .modal-body p").html(message);
					$("#resultDialog").modal({
						"backdrop"  : "static",
					    "keyboard"  : true,
					    "show"      : true
					});
				}
				//showResultDialog("FAIL");
				
				// 检查输入框并响应各个按钮操作
				$("#saveBtn").click(function(){
					// var inputs = $("form:first").find(":input:hidden, :input[type='text'], select, textarea");
					// alert(inputs.length);
					if(this.value != "delete"){
						if(!hasNecessaryValue()){
							alert("图片、铃音、文字中至少要填一项");
							return;
						}
					}
					$(":input[name='operate']").val(this.value);
					var action = $("form:first").attr("action");
					var params = $("form:first").serialize();
					//alert(action + " : " + params);
					//屏蔽各个按钮，后台返回后再还原各按钮状态
					var OPButtonState = getOPButtonState();
					disableAllOPButton();
					$.post(action, params, function(data){
						if (data.RESULT == "SUCCESS") {
							var message = data.RESULT;
							if (data.frame != null && data.frame.id != null)
								message += "<br/>" + "frame.id=" + data.frame.id;
							showResultDialog(data.RESULT, message);
						}
						setOPButtonState(OPButtonState);
					});
				});
				
				/** 表单动作按钮处理器 */
				function formActionsButtonHandler() {
					var operate = null;
					if (this.value != null && this.value != "")
						operate = this.value;
					else
						operate = "insert";
					if ("delete" != operate) {
						if(!hasNecessaryValue()){
							alert("图片、铃音、文字中至少要填一项");
							return;
						}
					} else {
						var id = $(":input[name='id']").val();
						if (id == null || id == "") {
							var currentFrameObj = $(":input[name='currentFrame']");
							var totalFrameObj = $(":input[name='totalFrame']");
							var currentFrame = currentFrameObj.val();
							var totalFrame = totalFrameObj.val();
							currentFrame = currentFrame > 1 ? currentFrame - 1 : 1;
							totalFrame = totalFrame > 1 ? totalFrame - 1 : 1;
							currentFrameObj.val(currentFrame);
							totalFrameObj.val(totalFrame);
							$(":input[name='id']").val("");
							$(":input[name='playTime']").val("");
							$(":input[name='imageUri']").val("");
							$(":input[name='audioUri']").val("");
							$(":input[name='text']").val("");
							$(":input[name='imageUri'], :input[name='audioUri'], :input[name='text']").trigger("change");
							return;
						}
					}
					$(":input[name='operate']").val(operate);
					var action = $("form:first").attr("action");
					var params = $("form:first").serialize();
					//屏蔽各个按钮，后台返回后再还原各按钮状态
					var OPButtonState = getOPButtonState();
					disableAllOPButton();
					var btnId = this.id;
					$.post(action, params, function(data){
						setOPButtonState(OPButtonState);
						if (data.RESULT == "SUCCESS") {
							var currentFrame = $(":input[name='currentFrame']").val();
							var totalFrame = $(":input[name='totalFrame']").val();
							if ("next" == operate || "previous" == operate || "delete" == operate) {
								currentFrame = data.currentFrame;
								totalFrame = data.totalFrame;
							} else if ("insert" == operate) {
								if ("beforeTop" == btnId) {
									currentFrame = 1;
									totalFrame = data.totalFrame + 1;
								} else if ("beforeCurrent" == btnId) {
									totalFrame = data.totalFrame + 1;
								} else if ("afterCurrent" == btnId || "afterCurrentBtn" == btnId) {
									currentFrame += 1;
									totalFrame = data.totalFrame + 1;
									// 如果当前帧超过了总帧数，当前帧就为总帧数
									currentFrame = (currentFrame <= totalFrame ? currentFrame : totalFrame);
								} else if ("afterEnd" == btnId) {
									totalFrame = data.totalFrame + 1;
									currentFrame = totalFrame;
								}
							}
							$(":input[name='currentFrame']").val(currentFrame);
							$(":input[name='totalFrame']").val(totalFrame);
							if ("insert" == operate) {
								$(":input[name='id']").val("");
								$(":input[name='playTime']").val("");
								$(":input[name='imageUri']").val("");
								$(":input[name='audioUri']").val("");
								$(":input[name='text']").val("");
							} else {
								if (data.frame != null) {
									$(":input[name='id']").val(data.frame.id != null ? data.frame.id : "");
									$(":input[name='playTime']").val(data.frame.playTime != null ? data.frame.playTime : "");
									$(":input[name='imageUri']").val(data.frame.imageUri != null ? data.frame.imageUri : "");
									$(":input[name='audioUri']").val(data.frame.audioUri != null ? data.frame.audioUri : "");
									$(":input[name='text']").val(data.frame.text != null ? data.frame.text : "");
								} else {
									$(":input[name='id']").val("");
									$(":input[name='playTime']").val("");
									$(":input[name='imageUri']").val("");
									$(":input[name='audioUri']").val("");
									$(":input[name='text']").val("");
								}
							}
							frameChangeHandler();
							$(":input[name='imageUri'], :input[name='audioUri'], :input[name='text']").trigger("change");
						} else {
							var message = data.RESULT;
							if (data.errorMsg != null)
								message += "<br/>ERRORMSG:" + data.errorMsg;
							showResultDialog(data.RESULT, message);
						}
					});
				}
				/** 【插入帧按钮组】的事件绑定 */
				$("#insertButtons").find("button[id], button[value], a[id]").on("click", formActionsButtonHandler);
				$("#previousBtn, #nextBtn, #deleteBtn").on("click", formActionsButtonHandler);
				
				/** 界面组件初始化 */
				function init() {
					$(":input[name='imageUri']").trigger("change");
					$(":input[name='text']").trigger("change");
				}
				init();
				
			});
		</script>
	</head>
	<body>
		<jsp:include page="/module/index/_top_navbar.jsp"></jsp:include>
		
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span2">
					<jsp:include page="/module/index/_menu.jsp"></jsp:include>
				</div>
				<div class="span10">
					<!-- 站点路径 -->
					<ul class="breadcrumb">
						<li><a href="<%=request.getContextPath() %>/"><i class="icon-home"></i>首页</a> <span class="divider">/</span></li>
						<li><a href="javascript:void(0);">内容管理</a> <span class="divider">/</span></li>
						<li class="active">内容上传</li>
					</ul>
					
					<ul class="nav nav-tabs">
						<li><a href="javascript:void(0)">内容上传</a></li>
						<li class="active"><a href="javascript:void(0)">帧编辑</a></li>
					</ul>
					
					<div class="row-fluid">
						<div class="span12">
							<fieldset class="pull-left">
								<div class="alert">
									<strong>重要提示：</strong>彩信大小不能超过75K，用户在上传图片和铃音时，请注意文件的大小。
								</div>
								<legend>帧信息</legend>
								<form action="<%=request.getContextPath() %>/module/frame/ajaxOperate.do" method="post" class="form-horizontal">
									<input type="hidden" name="id" value="${frame.id }"/>
									<input type="hidden" name="mmsId" value="${mmsId }"/>
									<input type="hidden" name="operate"/>
									<input type="hidden" name="currentFrame" value="${currentFrame }"/>
									<input type="hidden" name="totalFrame" value="${totalFrame }"/>
									<div class="control-group">
										<label class="control-label" for="playTime">播放时间</label>
										<div class="controls">
											<select id="playTime" name="playTime" class="span11">
												<option value="5" <c:if test="${frame.playTime == 5}">selected='selected'</c:if> >5</option>
												<option value="10" <c:if test="${frame.playTime == 10}">selected='selected'</c:if> >10</option>
												<option value="15" <c:if test="${frame.playTime == 15}">selected='selected'</c:if> >15</option>
												<option value="30" <c:if test="${frame.playTime == 30}">selected='selected'</c:if> >30</option>
												<option value="60" <c:if test="${frame.playTime == 60}">selected='selected'</c:if> >60</option>
												<option value="120" <c:if test="${frame.playTime == 120}">selected='selected'</c:if> >120</option>
												<option value="240" <c:if test="${frame.playTime == 240}">selected='selected'</c:if> >240</option>
												<option value="280" <c:if test="${frame.playTime == 280}">selected='selected'</c:if> >280</option>
												<option value="360" <c:if test="${frame.playTime == 360}">selected='selected'</c:if> >360</option>
											</select>秒
										</div>
									</div>
									<div class="control-group">
										<label class="control-label" for="imageUri">图片</label>
										<div class="controls">
											<div class="input-append">
												<input type="text" id="imageUri" name="imageUri" value="${frame.imageUri }" readonly="readonly" class="input-xlarge">
												<div class="btn-group">
													<button class="btn" type="button" id="browseImage">选择图片</button>
													<button class="btn dropdown-toggle" data-toggle="dropdown">
														<span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li><a id="cleanImageButton" tabindex="-1" href="javascript:void(0);">清除</a></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label class="control-label" for="audioUri">铃音</label>
										<div class="controls">
											<div class="input-append">
												<input type="text" id="audioUri" name="audioUri" value="${frame.audioUri }" readonly="readonly" class="input-xlarge">
												<div class="btn-group">
													<button class="btn" type="button" id="browseAudio">选择铃音</button>
													<button class="btn dropdown-toggle" data-toggle="dropdown">
														<span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li><a id="cleanAudioButton" tabindex="-1" href="javascript:void(0);">清除</a></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label class="control-label" for="text">文字</label>
										<div class="controls">
											<textarea id="text" name="text" rows="10" class="span11">${frame.text }</textarea>
										</div>
									</div>
								</form>
							</fieldset>
							<div class="pull-left">
								<div id="previewDiv">
						    		<div id="smsBgDiv"></div>
						    		<div id="phoneDiv"></div>
						    		<div id="contentDiv"></div>
						    	</div>
							</div>
						</div>
					</div>
					<div class="form-actions">
						<button id="previousBtn" value="previous" class="btn" type="button"><i class="icon-chevron-left"></i>上一帧</button>
						<button id="nextBtn" value="next" class="btn" type="button">下一帧<i class="icon-chevron-right"></i></button>
						<div id="insertButtons" class="btn-group dropup">
							<button id="afterCurrentBtn" class="btn"><i class="icon-plus"></i>当前帧后插入</button>
							<button class="btn dropdown-toggle" data-toggle="dropdown">
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a id="beforeTop" tabindex="-1" href="javascript:void(0);">在第一帧前插入</a></li>
								<li><a id="beforeCurrent" tabindex="-1" href="javascript:void(0);">在当前帧前插入</a></li>
								<li><a id="afterCurrent" tabindex="-1" href="javascript:void(0);">在当前帧后插入</a></li>
								<li><a id="afterEnd" tabindex="-1" href="javascript:void(0);">在末尾帧后插入</a></li>
							</ul>
						</div>
						<button id="deleteBtn" value="delete" class="btn btn-danger" type="button"><i class="icon-remove"></i>删除帧</button>
						<button id="saveBtn" value="save" class="btn btn-primary" type="button"><i class="icon-ok"></i>全部完成</button>
							<span class="label offset1">彩信帧数：<span id="frameSpan"></span></span>
					</div>
				</div>
		    </div>
	    </div>
	    
	    <div id="resultDialog" class="modal hide fade">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<span id="successLabel" class="label label-success">保存成功</span>
				<span id="failLabel" style="display: none;" class="label label-important">保存失败</span>
			</div>
			<div class="modal-body">
				<p></p>
			</div>
			<div class="modal-footer">
				<a href="#resultDialog" role="button" class="btn" data-toggle="modal">关闭</a>
				<a id="MmsDetailButton" href="#<%=request.getContextPath() %>/module/mms/list.do" class="btn btn-primary">查看彩信详情</a>
				<a id="MmsListButton" href="<%=request.getContextPath() %>/module/mms/list.do" class="btn btn-primary">查看列表页</a>
			</div>
		</div>
	</body>
</html>